<template>
	<view>
		<view class="">
			<view class="box d-jc-sb px-3 py-2">
				<view class="box d-ai-c">
					<text>头像</text>
				</view>
				<view class="user-logo box d-ai-c">
					<image @tap='chooseImage()' :src="userInfo.image" mode=""></image>
					<text class="iconfont iconqianjin"></text>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<view class="">
			<view class="box d-jc-sb m-3">
				<view class="">
					<text>姓名</text>
				</view>
				<view class="box">
					<input maxlength="6" class="input-name" type="text" v-model="userInfo.nickName" />
					<text class="iconfont iconqianjin"></text>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<view class="">
			<view class="box d-jc-sb m-3">
				<view class="">
					<text>性别</text>
				</view>
				<view class="box">
					<radio-group class="box" @change="radioChange">
						<label class="box" v-for="(item, index) in items" :key="item.value">
							<view class="box">
								<radio color="#FF5551" :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
					<text class="iconfont iconqianjin"></text>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<!-- <view class="">
			<view class="box  m-3">
				<view class="flex-1">
					<text>兴趣爱好</text>
				</view>
				<view class="flex-1 box">
					<view class="text-heide-1" >
						<text @tap='openMask(1)' class="">{{userInfo.interest==null?'请选择':userInfo.interest.value}}</text>
					</view>
					<view class="">
						<text class="iconfont iconqianjin"></text>
					</view>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<view class="box  m-3">
			<view class="flex-1">
				<text>服务需求</text>
			</view>
			<view class="flex-1 box">
				<view class="text-heide-1" >
					<text @tap='openMask(2)' class="">{{userInfo.hobbyName==null?'请选择':userInfo.interest.value}}</text>
				</view>
				<view class="">
					<text class="iconfont iconqianjin"></text>
				</view>
			</view>
		</view> -->
		<view class="">
			<view class="line"></view>
			<view class="box d-jc-sb m-3" @tap="changeInfo">
				<view class="auth">
					<view>实名认证</view>
					<view v-if="userInfo.isAuth === 1">已认证</view>
					<view v-if="userInfo.isAuth === 0">未认证</view>
				</view>
				<view class="box">
					<text class="iconfont iconqianjin"></text>
				</view>
			</view>
		</view>
		<view class="">
			<button class="btn" @tap='save()'>保存信息</button>
		</view>
		<view class="">
			<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="200"
				:height="200"></kps-image-cutter>
		</view>
		<uni-popup ref="popup">
			<view class="popup-card">
				<view class="">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view class="" v-for="(hobby,index) in hobbyList" :key="index">
							<view class="box d-flex" @tap='check(hobby.id,hobby.value,hobby.type)'>
								<view class="flex-1">
									<text class="iconfont icondagou"
										v-if="checkActive == hobby.id || checkActive2 == hobby.id ">
									</text>
								</view>
								<view class="scroll-view-item list flex-12">
									{{hobby.value}}
								</view>
							</view>
							<view class="line">

							</view>
						</view>

					</scroll-view>
				</view>
			</view>

		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		computed: mapState(['userInfo','loginState']),
		components: {
			kpsImageCutter
		},
		data() {
			return {
				items: [{
						value: '1',
						name: '男'
					},
					{
						value: '2',
						name: '女',
						checked: 'true'
					},

				],
				current: 3,
				userInfo:{
					// interest:{

					// },
					// hobbyName:{

					// },
					// hobby:[]
				},
				hobbyList:'',
				hobby:{
					type:''
				},
				checkActive: '',
				checkActive2: '',
				path:'',
				url:''



			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			let carData = ''
			uni.$on("carData", (rel) => {
				carData = rel
				if (carData == 1) {
					this.getUserInfo()

				}
			})
		},
		methods: {
			//完善信息页面
			changeInfo(){
				console.log(this.userInfo)
				if(this.userInfo.isAuth===0){
					uni.navigateTo({
					url:'./changeInfo'
				})
				}else if(this.userInfo.isAuth===1){
					uni.showToast({
						title: '已完成实名认证',
						duration: 1000,
						icon: 'none'
					})
				}

			},
			onok(ev) {
				let _this = this
				this.path = ev.path;
				this.url = "";
				console.log(JSON.stringify(this.path))
				uni.uploadFile({
					url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
					filePath: this.path,
					name: 'file',
					header: {
						ContentType: "image/jpg"
					},
					formData: {
						'user': 'test'
					},
					success: function(uploadFileRes) {
						let data = JSON.parse(uploadFileRes.data)
						console.log(data.dataMap)
						_this.userInfo.image = data.dataMap
						console.log("------" + _this.image)
					}
				});
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = "";
				console.log("====oncancle=====")

			},
			chooseImage() {
			    uni.chooseImage({
			        success: (res) => {
			            // 设置url的值，显示控件
			            this.url = res.tempFilePaths[0];
			        }
			    });
			},
			save(){
				this.$api.updateUserInfo(this.userInfo).then((res) => {
					if(res.data.code==200){
						uni.showToast({
							title: '保存成功',
							duration: 1000,
							icon: 'none'
						})
						setTimeout(function() {
							// uni.switchTab({
							// 	url:'user'
							// })
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				})
			},
			// 缓存获取用户信息
			getUserInfo() {
				// this.userInfo = uni.getStorageSync('userInfo') ==null? '':uni.getStorageSync('userInfo')
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					if (userInfo != null) {
						this.userInfo = userInfo
						this.current = Number(this.userInfo.sex)-1
					}

				})

			},
			check(id, value, type) {
				debugger
				if(type==2){
					let xingqu = JSON.parse(this.userInfo.hobby)[0]
				}else{
					let aihao = JSON.parse(this.userInfo.hobby)[1]
				}
				if (this.checkActive == id || this.checkActive2 == id) {
					this.$refs.popup.close()
				}
				if (type == 1) {
					this.userInfo.interest.value = value
					xingqu = id
					this.checkActive = id
				}
				if (type == 2) {
					this.userInfo.hobbyName.value = value
					this.checkActive2 = id
					aihao = id
				}
				let arr = [xingqu,aihao]
				console.log(JSON.stringify(arr))
				// arr.push(xingqu,aihao)
				// console.log(JSON.stringify(arr))
				this.userInfo.hobby = JSON.stringify(arr)
				// this.userInfo.hobby.push(aihao)
			},
			openMask(type) {
				this.$refs.popup.open()
				this.hobby.type = type
				this.$api.loadRegisterUser(this.hobby).then((res) => {
					this.hobbyList = res.data.data

				})

			},

			radioChange: function(evt) {
				this.userInfo.sex = evt.detail.value
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}


			}

		}
	}
</script>

<style>
	.input-name{
		width: 200rpx;
		text-align: end;
	}
	.btn{
		background-color: #FF5551;
		width: 600rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		margin-top: 50rpx;
	}
	.popup-card {
		width: 700rpx;
		background-color: #dfdfdf;
		height: 800rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 0 auto;

	}
	.text-heide-1{
		width: 400rpx;
		text-align: end;
	}
	.user-logo image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx;
	}

	.iconqianjin {
		color: #999999;
		padding-left: 20rpx;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background-color: #EEEEEE;
	}
	.auth{
		width: 648rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
